<template>
    <div>
        <div style="margin: 20px 0px;display: flex;justify-content: center;">
            <el-input placeholder="关键词搜索" v-model="newPageForm.key" style="width: 55%;min-width: 400px;"
                @keyup.enter.native="gotoSearchKey(newPageForm.key)">
                <el-button slot="append" icon="el-icon-search" @click="gotoSearchKey(newPageForm.key)"></el-button>
            </el-input>
        </div>
        <div class="newsList" v-loading="loading">
            <div v-for="news in newsList" :key="news.id" class="news-item" @click="goToNewsDetail(news.id)">
                <img class="cover-image" :src="news.cover" alt="News Cover">
                <div class="content">
                    <div class="title">{{ news.title }}</div>
                    <div class="publish-time">
                        <div style="display: flex;align-items: center;">
                            <img :src="news.user.authorAvatar" style="width: 38px; height: 38px; border-radius: 50%" />
                            <span style="padding-left: 4px;font-size: 17px;">
                                {{ news.user.authorNickname }}
                            </span>
                        </div>
                        <div>
                            {{ news.publishTime }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<style scoped>
.newsList {
    margin-top: 38px;
    padding: 0px 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.news-item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: calc(33.33% - 20px);
    height: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.news-item:hover {
    .title {
        color: #409EFF;
    }
}

@media (max-width: 768px) {
    .news-item {
        width: 100%;
        /* 在较小的屏幕上，每行显示一个项目 */
    }
}

.news-item .cover-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
}

.news-item .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 8px;
    width: 100%;
    height: 40%;
}

.news-item .title {
    font-size: 20px;
    font-weight: bold;
}

.news-item .publish-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #888888;
    margin: 0px 12px 12px;
}

.page {
    margin-left: 300px;
    max-width: 200px;
    /* 设置分页器的最大宽度 */
}

.box {
    display: flex;
    width: 720px;
    height: 30px;
    border: 2px solid red;
    margin-left: 260px;
    margin-bottom: 30px;
    border-radius: 5px;
}

.input {
    float: left;
    width: 400px;
    /*宽400*/
    height: 20px;
    /*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
    outline: none;
    border: none;
    /*取消文本框内外边框*/
}

.button {
    float: left;
    width: 96px;
    height: 30px;
    color: white;
    background-color: red;
    /*将按钮背景设置为红色，字体设置为白*/
    border: none;
    outline: none;
    /*取消边框和外边框将按钮边框去掉*/
}
</style>
  
<script>
import { getSearchArticle } from '@/api/controller'
// 假设有一个包含新闻数据的数组
export default {
    data() {
        return {
            newsList: [], // 新闻列表
            newPageForm: {
                pageNum: 1,
                pageSize: 20,
                key: ''
            },
            loading: false
        };
    },
    mounted() {
        this.newPageForm.key = this.$route.query.key
        this.getNewList();
    },
    methods: {
        goToNewsDetail(id) {
            // 在点击新闻项时进行页面跳转，将整个新闻对象作为参数传递给详情页面
            this.$router.push({ path: '/newsDetail/' + id });
        },
        gotoSearchKey(key) {
            if (key === '') {
                this.$message.error('搜索关键词不能为空！')
                return
            }
            if (key === this.$route.query.key) return
            this.$router.push({
                path: '/search', query: { key: key }
            })
        },
        async getNewList() {
            this.loading = true
            getSearchArticle(this.newPageForm)
                .then((response) => {
                    const { data } = response;
                    this.newsList = data.list
                })
                .catch((error) => {
                    this.$message.error(error.message);
                })
                .finally(() => {
                    this.loading = false
                })
        }
    },
    // 侦听器
    watch: {
        //监听路由
        //监听路由的categoryId属性的数据变化
        '$route.query.key': function () {
            // 只要categoryId的值发生变化,这个方法就会被调用
            this.newPageForm.key = this.$route.query.key
            //重新调用请求数据的方法，刷新页面数据
            this.getNewList()
        }
    },
};
</script>